<template>
  <div class="product-carousel">
    <div class="carousel-header">
      <h2>{{ $t('为您推荐') }}</h2>
    </div>

    <div class="carousel-container" ref="containerRef">
      <button class="control-btn prev" :disabled="isAtStart" @click="scrollPrev">
        <i class="fa-solid fa-angle-left"></i>
      </button>
      <div class="carousel-track" ref="trackRef">
        <div v-for="product in recommendList" :key="product.id" class="product-card" @click="goToDetail(product)">
          <div class="product-image">
            <img :src="product.image" :alt="product.name">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <div class="product-price">
              <span class="price">{{ langStore.languageSymbol }}{{ product.price * langStore.languageRate }}</span>
              <span class="original-price" v-if="product.price">{{ langStore.languageSymbol }}{{ product.price * langStore.languageRate }}</span>
<!--              <span class="currency">{{ langStore.languageSymbol }}</span>-->
<!--              <span class="amount">{{ product.price*langStore.languageRate }}</span>-->
            </div>
<!--            <div class="product-rating">-->
<!--              <div class="stars">-->
<!--                <i v-for="i in 5" :key="i"-->
<!--                   :class="[-->
<!--                     'fa-star',-->
<!--                     i <= Math.floor(product.rating) ? 'fa-solid' :-->
<!--                     i - product.rating < 1 ? 'fa-star-half-stroke fa-solid' : 'fa-regular'-->
<!--                   ]"-->
<!--                ></i>-->
<!--              </div>-->
<!--              <span class="review-count">({{ product.reviewCount }})</span>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <button class="control-btn next" :disabled="isAtEnd" @click="scrollNext">
        <i class="fa-solid fa-angle-right"></i>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed, withDefaults } from 'vue'
import useLangStore from '@/store/modules/lang'
import { getRecommendProducts } from '@/api/commodity'
import {useRouter} from "vue-router";



interface Product {
  id: number
  name: string
  price: number
  image: string
  rating: number
  reviewCount: number
}

export default defineComponent({
  name: 'ProductCarousel',
  props: {
    products: {
      type: Array as () => Product[],
      default: () => ([])
    }
  },

  setup(props) {
    const recommendList = ref<Product[]>([])
    const getProducts = async () => {
      const res = await getRecommendProducts()
      if (res.code === 200) {
        recommendList.value = res.data
      }
    }

    const router = useRouter();
    const goToDetail = (product: UnwrapRefSimple<Product>) => {
      //页面跳转
      if(product.type==0){
        //普通商品
        router.push(`/products/detail/${product.id}`)
      }else{
        router.push(`/deals/${product.id}`)
      }

    }

    const langStore = useLangStore()
    const containerRef = ref<HTMLElement | null>(null)
    const trackRef = ref<HTMLElement | null>(null)
    const scrollPosition = ref(0)
    const scrollWidth = ref(0)
    const containerWidth = ref(0)

    const isAtStart = computed(() => scrollPosition.value <= 0)
    const isAtEnd = computed(() => {
      if (!scrollWidth.value || !containerWidth.value) return true
      return scrollPosition.value >= scrollWidth.value - containerWidth.value
    })

    const updateDimensions = () => {
      if (trackRef.value && containerRef.value) {
        scrollWidth.value = trackRef.value.scrollWidth
        containerWidth.value = containerRef.value.clientWidth
      }
    }

    const scrollPrev = () => {
      if (!containerRef.value) return
      const scrollAmount = containerRef.value.clientWidth * 0.8
      scrollPosition.value = Math.max(0, scrollPosition.value - scrollAmount)
      containerRef.value.scrollTo({
        left: scrollPosition.value,
        behavior: 'smooth'
      })
    }

    const scrollNext = () => {
      if (!containerRef.value || !trackRef.value) return
      const scrollAmount = containerRef.value.clientWidth * 0.8
      const maxScroll = trackRef.value.scrollWidth - containerRef.value.clientWidth
      scrollPosition.value = Math.min(maxScroll, scrollPosition.value + scrollAmount)
      containerRef.value.scrollTo({
        left: scrollPosition.value,
        behavior: 'smooth'
      })
    }

    onMounted(() => {
      getProducts()
      updateDimensions()
      window.addEventListener('resize', updateDimensions)
    })

    return {
      recommendList,
      langStore,
      containerRef,
      trackRef,
      isAtStart,
      isAtEnd,
      scrollPrev,
      scrollNext,
      goToDetail
    }
  }
})
</script>

<style lang="scss" scoped>
.product-carousel {
  width: 100%;
  padding: 20px 0;

  .carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 20px;

    h2 {
      font-size: 21px;
      color: #232f3e;
      font-weight: 700;
    }
  }

  .carousel-container {
    overflow: hidden;
    position: relative;

    .control-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border: 1px solid #ddd;
      border-radius: 50%;
      background: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 1;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);

      &.prev {
        left: 10px;
      }

      &.next {
        right: 10px;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      &:not(:disabled):hover {
        border-color: #888;
        background: #f8f8f8;
        transform: translateY(-50%) scale(1.1);
      }

      i {
        font-size: 16px;
        color: #232f3e;
      }
    }

    .carousel-track {
      display: flex;
      gap: 20px;
      padding: 0 50px;
    }

    .product-card {
      flex: 0 0 200px;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s ease;

      &:hover {
        transform: translateY(-4px);
      }

      .product-image {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .product-info {
        padding: 12px;

        .product-name {
          font-size: 14px;
          color: #232f3e;
          margin-bottom: 8px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          overflow: hidden;
          line-height: 1.4;
        }

        .product-price {
          margin-bottom: 8px;
          display: flex;
          align-items: baseline;
          gap: 8px;

          .price {
            font-size: 20px;
            font-weight: bold;
            color: #0F1111;
          }

          .original-price {
            color: #565959;
            text-decoration: line-through;
            font-size: 14px;
          }

          .currency {
            font-size: 12px;
            color: #232f3e;
          }

          .amount {
            font-size: 20px;
            font-weight: 700;
            color: #232f3e;
          }
        }

        .product-rating {
          display: flex;
          align-items: center;
          gap: 4px;

          .stars {
            position: relative;
            width: 80px;
            height: 16px;
            display: flex;
            gap: 2px;

            i {
              color: #ffa41c;
              font-size: 14px;
            }
          }

          .review-count {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .product-carousel {
    .carousel-track {
      gap: 15px;
      padding: 0 15px;
    }

    .product-card {
      flex: 0 0 160px;
    }
  }
}
</style>
